<template>
    <view :style="{background: pageData.bgColor, '--color': color}">
        <!-- 样式三 -->
        <view v-if="pageData.style == 3">
            <view class="p-bot30 p-left8 p-right8">
                <u-tabs :list="list" :activeStyle="{color}" lineWidth="20" :lineColor="color" keyName="bussName" @click="click"></u-tabs>
            </view>
            <view class="slide d-flex p-left30" v-if="list.length">
                <view class="item m-right30 p-re" v-for="(item,index) in list[current].goods_list" :key="index"
                    @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)">
                    <text class="iconfont size28 p-ab" :class="item.shop_collect == 1 ? 'icon-guanzhu3' : 'icon-guanzhu1'" @click.stop="handleCollect(item)"></text>
                    <image :src="$imgUrls(item.logo)" mode="aspectFill" class="img" :class="{'shadow': pageData.shadow}"></image>
                    <view class="d-flex a-center p-top20 m-bot20">
                        <view class="type h7 white thmeBg m-right10 f-shrink-0">{{ item.bussName }}</view>
                        <view class="size30 bold300 ellipsis">{{ item.name }}</view>
                    </view>
                    <view class="h6 color_99 bold300 ellipsis m-bot30">{{ item.address }}</view>
                </view>
            </view>
        </view>

        <view v-else :class="{'d-flex': pageData.style == 2}">
            <!-- 顶部菜单 -->
            <view v-if="pageData.style == 1">
                <!-- scrollable禁止滚动可使标签居中 -->
                <u-tabs :list="list" :scrollable="false" :activeStyle="{color}" lineWidth="20" :lineColor="color" keyName="bussName" @click="click"
                    itemStyle="padding: 0; height: 44px;"></u-tabs>
            </view>

            <!-- <view class="d-flex j-sa m-top30" v-if="pageData.style == 1">
                <view class="color_33 text-center" :class="{'thmeColor': index==current}" v-for="(item,index) in list" :key="index" @click="click({index})">
                    <image :src="$imgUrls(item.busImg)" mode="aspectFill" class="tabImg m-bot10"></image>
                    <view>{{ item.bussName }}</view>
                </view>
            </view> -->

            <!-- 左侧菜单 -->
            <view class="side" v-if="pageData.style == 2">
                <view class="tab" :class="{'on': index==current}" v-for="(item,index) in list" :key="index" @click="click({index})">{{ item.bussName }}</view>
            </view>
            <view class="padding30" :class="{'flex-1 p-left0': pageData.style == 2}" v-if="list.length">
                <view class="storeItem bgwhite bor_radius_8 padding20 d-flex" v-for="(item,index) in list[current].goods_list" :key="index"
                    :class="{'shadow': pageData.shadow, 'm-top20': index }" @click="toUrl('/pages/store/storeIndex?shop_id=' + item.shop_id)">
                    <image :src="$imgUrls(item.logo)" mode="aspectFill" class="img bor_radius_10"></image>
                    <view class="p-left20 flex-1">
                        <view class="d-flex a-center">
                            <view class="type h7 white thmeBg m-right10 f-shrink-0">{{ item.bussName }}</view>
                            <view class="size30 ellipsis">{{ item.name }}</view>
                        </view>
                        <view class="d-flex a-center m-top20" v-if="pageData.style == 1">
                            <view class="d-flex a-center m-right20">
                                <u-rate :value="item.score" :minCount="0" activeColor="#FF632D" inactiveColor="#e6e5e4" inactiveIcon="star-fill" 
                                    size="16" gutter="1" readonly allowHalf></u-rate>
                                <view class="score size28 bold p-left10">{{ item.score }}</view>
                            </view>
                            <view class="h6 color_68" v-if="item.sales_number">销量{{ item.sales_number }}</view>
                        </view> 
                        <view class="d-flex a-center m-top20" v-else>
                            <view class="score bold p-right20">
                                <text class="size28">{{ item.score }}</text>
                                <text class="h6">分</text>
                            </view>
                            <view class="h6 color_68 p-right20" v-if="item.sales_number">销量{{ item.sales_number }}</view>
                            <!-- <view class="h6 color_68">好评{{ item.favorable }}%</view> -->
                        </view>
                        <view class="d-flex j-sb color_68 m-top20" v-if="item.address">
                            <view class="d-flex a-center flex-1">
                                <text class="iconfont icon-daohang m-right8"></text>
                                <text class="h6 ellipsis">{{ item.address }}</text>
                            </view>
                            <view class="h6 p-left10" v-if="pageData.style == 1 && item.distance">{{ item.distance }}</view>
                        </view>
                        <view class="d-flex a-center color_68 m-top20" v-if="item.runTime">
                            <text class="iconfont icon-bar_icon_shijian size26 m-left4 m-right8"></text>
                            <text class="h6">{{ item.runTime }}</text>
                        </view>
                    </view>
                </view>

                <emptys v-if="!list[current].goods_list.length" :top="10"></emptys>
            </view>
        </view>
    </view>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    props: ['pageData'],
    data(){
        return {
            list: [],
            current: 0
        }
    },
    computed: {
        ...mapState(['color','vid'])
    },
    mounted(){
        this.getBlockInfo()
    },
    methods: {
        ...mapMutations(['setHome']),
        async getBlockInfo(){
            const result = await this.$getBlockInfo(this.pageData.list)
            this.list = result.list || []
        },
        click(e){
            this.current = e.index
        },
        handleCollect(item){ // 关注
            if (!this.vid) return this.setHome({showMode: true})
            this.$http.post({
                url: '/singleSaleApi/store_collect',
                data: {
                    store_id: item.shop_id
                }
            }).then(res => {
                if(res.code != 200) return this.$Toast(res.msg)
                this.getBlockInfo()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.tabImg {
    width: 100rpx;
    height: 100rpx;
}
.slide {
    overflow-x: scroll;
    .item {
        width: 280rpx;
        .img {
            width: 280rpx;
            height: 436rpx;
        }
        .icon-guanzhu1,.icon-guanzhu3 {
            top: 20rpx;
            left: 20rpx;
            color: var(--color);
            z-index: 10;
        }
    }
}
.storeItem {
    .img {
        width: 160rpx;
        height: 160rpx;
    }
    .score {
        color: #dc1a20;
        line-height: 30rpx;
    }
}
.side {
    width: 164rpx;
    .tab {
        width: 100%;
        line-height: 100rpx;
        text-align: center;
        font-size: 30rpx;
        color: #333;
        position: relative;
        &.on {
            color: var(--color);
            &::after {
                content: '';
                position: absolute;
                width: 6rpx;
                height: 50rpx;
                background: var(--color);
                left: 0;
                top: 50%;
                margin-top: -25rpx;
            }
        }
    }
}
.type {
    width: fit-content;
    line-height: 32rpx;
    padding: 0 10rpx;     
    border-radius: 6rpx;   
}
.p-left0 {
    padding-left: 0;
}
.shadow {
    box-shadow: 0 4rpx 10rpx 2rpx rgba(105,105,105,0.1);
}
</style>